<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head th:replace="commons :: head">
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">

    <!-- 内容主体区域 -->
    <div style="padding: 15px;">
            <a onclick="add()" class="layui-btn">添加用户</a>
        <div class="demoTable">
            搜索用户名：
            <div class="layui-inline">
                <input class="layui-input" id="nameReload" autocomplete="off">
            </div>
            <button class="layui-btn" data-type="reload">搜索</button>
        </div>

        <table class="layui-hide" id="LAY_table" lay-filter="user"></table>
    </div>
</div>


<div th:replace="commons :: script"></div>

</body>
</html>
<script type="text/javascript">
    layui.use(['table', 'layer', 'jquery', 'util'], function () {
        var table = layui.table
            , layer = layui.layer
            , $ = layui.$;

        var cols = [
            {checkbox: true, fixed: true}
            , {field: 'name', title: '用户名'}
            , {field: 'loginName', title: '登录名'}
            , {
                field: 'sex', title: '性别', sort: true, templet: function (d) {
                    if (d.sex === "1") {
                        return "男"
                    } else if (d.sex === "0") {
                        return '女'
                    }
                }
            }
            , {field: 'name', title: '姓名'}
            , {field: 'email', title: '邮箱'}
            , {field: 'mobile', title: '手机', sort: true}
            , {field: 'loginIp', title: '最后登陆IP'}
            , {
                field: 'loginDate', title: '最后登陆时间'
                , templet: '<div>{{ layui.util.toDateString(d.loginDate) }}</div>'
            }
            , {fixed: 'right', title: '操作', width: 120, align: 'center', toolbar: '#bar'}
        ];
        tableRender("#LAY_table", basePath + "/sys/user/list", cols);

        //监听工具条
        table.on('tool(user)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                dataDel(obj, basePath + '/sys/user/del?id=' + data.id);
            } else if (obj.event === 'edit') {
                openFull(basePath + '/sys/user/edit?id=' + data.id, '编辑用户');
            }
        });

        //点击事件
        active = {
            //表格重载
            reload: function () {
                var name = $('#nameReload').val();
                tableReload({name: name})
            }
        };
        $('.layui-btn').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });

        //监听复选框选择
        table.on('checkbox(user)', function (obj) { //id为lay-filter的值
            console.log(obj.checked); //当前是否选中状态
            console.log(obj.data); //选中行的相关数据
            console.log(obj.type); //如果触发的是全选，则为：all，如果触发的是单选，则为：one
        });

    });

    //添加页面
    function add() {
        open(basePath + "/sys/user/add", "添加用户", 700, 700);
    }

</script>
<script type="text/html" id="bar">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>